<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="Dados do Pedido"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:form>
                <h:panelGrid columns="7" style="margin-bottom: 20px;">
                    <h:commandButton styleClass="btn btn-mini btn-primary" action="/cadastro/cliente/List.xhtml" value="Novo pedido"/>
                    <p:spacer width="10" height="10"/>
                    <h:commandButton styleClass="btn btn-mini btn btn-warning" action="#{pedidoController.finalizarAndView()}" value="Finalizar pedido" onclick="return confirme('Confirma a finalização?')" rendered="#{pedidoController.selected.status eq 'PENDENTE'}"/>                    
                    <p:spacer width="10" height="10"/>
                    <h:commandButton styleClass="btn btn-mini btn btn-danger" action="#{pedidoController.destroyAndView}" value="Cancelar pedido" onclick="return confirme('Confirma o cancelamento?')" rendered="#{pedidoController.selected.status eq 'PENDENTE'}"/>
                </h:panelGrid>
                <fieldset>
                    <legend align="left"><h:outputText value="#{pedidoController.selected.cliente.nome}"/></legend>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Código:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.id}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Status:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.status.status}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Data:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.dataPed}">
                                <f:convertDateTime pattern="dd/MM/yyyy" />
                            </h:outputText>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Endereço de entrega:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.enderecoEntrega.label}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Telefone entrega:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.telefoneEntrega.label}"/>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Produtos selecionados:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left" style="margin-top: 5px;">
                            <table>
                                <tr>
                                    <ui:repeat value="#{pedidoController.selected.itens}" var="ip">
                                        <td>
                                            <h:panelGrid columns="2">
                                                <h:outputText value="Imagem"/>
                                                <h:graphicImage library="img" name="#{ip.produto.imagem}"  width="32" height="32"/>

                                                <h:outputText value="Produto:"/>
                                                <h:outputText value="#{ip.produto.prodNome}"/>

                                                <h:outputText value="Preço:"/>
                                                <h:outputText value="#{ip.preco}">
                                                    <f:convertNumber type="currency" locale="pt_BR"/>
                                                </h:outputText>

                                                <h:outputText value="Quantidade:"/>
                                                <h:outputText value="#{ip.qtd}" />

                                                <h:outputText value="Total:"/>
                                                <h:outputText value="#{ip.preco * ip.qtd}" id="qtd">
                                                    <f:convertNumber type="currency" locale="pt_BR"/>
                                                </h:outputText>
                                            </h:panelGrid>
                                        </td>
                                        <td>
                                            <p:spacer width="10" height="10"/>
                                        </td>
                                    </ui:repeat>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Desconto:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.selected.desconto}">
                                <f:convertNumber type="currency" locale="pt_BR"/>
                            </h:outputText> 
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-2" align="left">
                            <h:outputText value="Total pedido:" style="font-style: oblique;"/>
                        </div>
                        <div class="col-md-6" align="left">
                            <h:outputText value="#{pedidoController.calcularValorTotalPedido(pedidoController.selected)}">
                                <f:convertNumber type="currency" locale="pt_BR"/>
                            </h:outputText> 
                        </div>
                    </div>
                </fieldset>
            </h:form>
        </ui:define>
    </ui:composition>
</html>
